<template>
  <div class="container">
    <Breadcrumb
      :items="[
        'menu.validation',
        'menu.validation.sms',
        'menu.validation.sms.list',
      ]"
    />
    <a-card class="general-card" :title="$t('menu.validation.sms.list')">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="phone" label="手机号">
                  <a-input
                    v-model="formModel.phone"
                    placeholder="请输入"
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="applicationId" label="短信应用">
                  <a-select
                      :loading="loading"
                      placeholder="请输入"
                      allow-search
                      allow-clear
                      @search="smsApplicationSearch"
                      :filter-option="false"
                      v-model="formModel.applicationId"
                  >
                    <a-option v-for="item of smsApplicationList" :value="item.id">{{
                        item.name
                      }}</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="code" label="验证码">
                  <a-input
                      v-model="formModel.code"
                      placeholder=""
                      allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="发送时间" field="createTime">
                  <a-range-picker
                      showTime
                      :time-picker-props="{
                        defaultValue:['00:00:00','00:00:00']
                        }"
                      @change="onCreateTimeChange"
                      @select="onCreateTimeSelect"
                      style=" width: 380px; "
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="短信类型" field="type">
                  <a-select
                      v-model="formModel.type"
                      placeholder="请选择"
                      allow-clear
                  >
                    <a-option :value="1">注册</a-option>
                    <a-option :value="2">身份验证</a-option>
                    <a-option :value="3">通知</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 40px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <!-- <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              {{ $t('searchTable.form.reset') }}
            </a-button> -->
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
<!--            <a-button type="primary" @click="handleAdd">-->
<!--              <template #icon>-->
<!--                <icon-plus />-->
<!--              </template>-->
<!--              {{ $t('searchTable.operation.create') }}-->
<!--            </a-button>-->
<!--            <a-upload action="/">-->
<!--              <template #upload-button>-->
<!--                <a-button>-->
<!--                  {{ $t('searchTable.operation.import') }}-->
<!--                </a-button>-->
<!--              </template>-->
<!--            </a-upload>-->
          </a-space>
        </a-col>
        <a-col
          :span="12"
          style="display: flex; align-items: center; justify-content: end"
        >
<!--          <a-button>-->
<!--            <template #icon>-->
<!--              <icon-download />-->
<!--            </template>-->
<!--            {{ $t('searchTable.operation.download') }}-->
<!--          </a-button>-->
        </a-col>
      </a-row>
      <a-table
        row-key="id"
        :columns="columns"
        :data="state.list"
        :style="{ height: '700px' }"
        :pagination="pagination"
        :loading="loading"
        @page-change="pageChange"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
        <!-- <template #operations="{ record }">
          <a-space>
            <a-popconfirm content="您确定删除吗？" @ok="onDelete(record.id)">
              <a-button type="primary" status="danger" size="mini"
                >删除</a-button
              >
            </a-popconfirm>
            <a-button type="primary" size="mini" @click="handleEdit(record)"
              >编辑</a-button
            >
          </a-space>
        </template> -->
      </a-table>
    </a-card>
    <editAdd ref="editAddRef" @fetch-data="fetchData" />
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import {cfSmsGet, getSmsConfigListByQuery} from '@/api/verification';
  import editAdd from './editAdd.vue';
  import {parseTime} from "@/utils";
  import {getUserInfo} from "@/utils/auth";
  import {cfDeveloperGet} from "@/api/user";
  import dayjs from "dayjs";

  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
  });
  const loading = ref(false);
  const editAddRef = ref();
  const smsApplicationList = ref([]);
  const columns = [
    {
      title: '手机号',
      dataIndex: 'phone',
    },
    {
      title: '短信类型',
      dataIndex: 'newType',
    },
    {
      title: '状态',
      dataIndex: 'newStatus',
    },
    {
      title: '验证码',
      dataIndex: 'code',
    },
    // {
    //   title: 'accessToken短密钥串',
    //   dataIndex: 'Authorization',
    // },
    {
      title: '电话区号',
      dataIndex: 'areaCode',
    },
    {
      title: '接收人',
      dataIndex: 'uid',
    },
    {
      title: '发送时间',
      dataIndex: 'newCreateTime',
    },
    {
      title: '过期时间',
      dataIndex: 'newExpireTime',
    },
  ];
  const state = reactive({
    list: [],
  });
  const generateFormModel = () => {
    return {
      phone: '',
      uid: '',
      applicationId: '',
      code: null,
      minCreateTime: null,
      maxCreateTime: null,
      type: null,
    };
  };
  const formModel = ref(generateFormModel());

  onMounted(() => {
    fetchData();
    smsApplicationSearch('');
  });

  const pageChange = (e: number) => {
    pagination.current = e;
    fetchData();
  };
  const handleAdd = () => {
    editAddRef.value.handleClick();
  };
  const handleEdit = (e: any) => {
    editAddRef.value.handleClick(e);
  };
  const search = () => {
    fetchData();
  };
  const checkParams = (obj: any) => {
    // eslint-disable-next-line no-restricted-syntax, guard-for-in
    for (const i in obj) {
      if (!obj[i]) {
        if (obj[i] !== 0) {
          obj[i] = null;
        }
      }
    }
    return obj;
  };
  const smsApplicationSearch = async (_applicationName: any) => {
    const { data, code } = await getSmsConfigListByQuery({
      params: {
        page: 1,
        size: 200,
        name: _applicationName
      },
    });
    if (code == 10002) {
      smsApplicationList.value = data;
    } else {
      smsApplicationList.value = [];
    }
  };
  const onCreateTimeChange = (dateString: any, date: Date[]) => {
    if(date!=undefined){
      formModel.value.minCreateTime = dayjs(date[0]).valueOf() + '';
      formModel.value.maxCreateTime = dayjs(date[1]).valueOf() + '';
    }else{
      formModel.value.minCreateTime = '';
      formModel.value.maxCreateTime = '';
    }

  };
  const onCreateTimeSelect = (dateString: any, date: any) => {
    //不做任何操作
  };
  const fetchData = async () => {
    loading.value = true;
    // @ts-ignore
    const { data, code, total } = await cfSmsGet({
      params: checkParams({
        page: pagination.current,
        size: pagination.pageSize,
        phone: formModel.value.phone,
        uid: formModel.value.uid,
        applicationId: formModel.value.applicationId,
        code: formModel.value.code,
        minCreateTime: formModel.value.minCreateTime,
        maxCreateTime: formModel.value.maxCreateTime,
        type: formModel.value.type,
      }),
    });
    loading.value = false;
    if (code === 10002) {
      // @ts-ignore
      if (total) pagination.total = total;
      for (const i of data) {
        i.newStatus = i.status ? '已使用' : '未使用';
        i.newType = i.type == 1 ? '注册' : i.type == 2 ? '身份验证' : '通知';
        i.newCreateTime = parseTime(i.createTime) || '-';
        i.newExpireTime = parseTime(i.expireTime) || '-';
      }
      state.list = data;
    } else {
      state.list = [];
    }
    // console.log(data, code, 999);
  };
</script>

<script lang="ts">
  export default {
    name: 'SearchTable',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }
</style>
